<p style="font-size: 20px; font-weight: bold">signal works!</p>

<div>
  <div>
    <p>普通变量：num = {{ num }}</p>
    <button (click)="num = num + 1">Num ++</button>
  </div>

  <div class="container">
    <h2>Cookie recipe</h2>

    <p>信号量：count = {{ count() }}</p>
    <button (click)="updateCount()">Count ++</button>

    <div>
      <label>
        # of cookies:
        <input type="range" min="10" max="100" step="10" [value]="count()" (input)="update($event)"/>
        {{ count() }}
      </label>

      <p>Butter: {{ butter() }} cup(s)</p>
      <p>Sugar: {{ sugar() }} cup(s)</p>
      <p>Flour: {{ flour() }} cup(s)</p>
    </div>

    <div>
      <p>---------------------------</p>
      <p>计算属性：{{ conditionalCount() }}</p>
      <button (click)="updateShowCount()">toggle show count</button>
    </div>
  </div>

  <div class="container">
    <p>=======age = {{ appStore.age() }}</p>
    <button (click)="appStore.updateAge()">更改age</button>
  </div>

  <div class="container">
    <p>========Effects</p>
  </div>
</div>

<style>

</style>
